import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactDOM from 'react-dom';

let data = {
    name: '阿尔托莉雅',
    age: 18,
    gender: 'girl',
    hobby: ['ride', 'battle'],
    pos: {
        x: "12",
        y: 12
    },
    salary: 10000
}

class Person extends Component {
    static propTypes = {
        name: PropTypes.string,
        hobby: PropTypes.arrayOf(PropTypes.string),
        gender: PropTypes.oneOf(['girl', 'boy']),
        pos: PropTypes.shape({
            x: PropTypes.string,
            y: PropTypes.number
        }),
        salary(props, propName, component) {
            let salary = props[propName];
            if (salary < 20000) {
                throw new Error(`${component} ${propName} is too low`);
            }
        }

    }
    render() {
        let { name, gender, hobby, age } = this.props
        return (<div>
            {name} is {gender} like {hobby[1]} now {age}
        </div>);
    }
}

ReactDOM.render(<Person {...data}></Person>, window.root)

export default Person;